<template>
  <view class="tui-selected-class tui-dropdown-list" :style="{ height: selectHeight ? selectHeight + 'rpx' : 'auto' }">
    <slot name="selectionbox" />
    <view
      class="tui-dropdown-view"
      :class="[show ? 'tui-dropdownlist-show' : '',shadow?'shadow':'',transition?'transition':'']"
      :style="{ backgroundColor: backgroundColor, 'max-height': show ? height + 'rpx' : 0, top: top + 'rpx' }"
    >
      <slot name="dropdownbox" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'TuiDropdownList',
  props: {
    // 控制显示
    show: {
      type: Boolean,
      default: false
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    // top  rpx
    top: {
      type: Number,
      default: 0
    },
    // 下拉框高度 rpx
    height: {
      type: Number,
      default: 0
    },
    // 选择框高度 单位rpx
    selectHeight: {
      type: Number,
      default: 0
    },
    shadow: {
      type: Boolean,
      default: false
    },
    transition: {
      type: Boolean,
      default: true
    }
  },
  methods: {}
}
</script>

<style scoped>
.tui-dropdown-list {
	position: relative;
}

.tui-dropdown-view {
	width: 100%;
	overflow: hidden;
	position: absolute;
	z-index: -99;
	left: 0;
	opacity: 0;
	/* visibility: hidden; */
}

.transition{
  transition: all 0.2s ease-in-out;
}

.tui-dropdownlist-show {
	opacity: 1;
	z-index: 996;
	/* visibility: visible; */
}
</style>
